<template>
	<div class="wrapper">
		<!-- header部分 -->
		<header>
			<p>我的券包</p>
		</header>

		<div class="rollback">
			<i class="fa fa-angle-left" @click="goBack()"></i>
		</div> 
		
		<!--券包信息部分-->
		<ul class="coupon">
			<li v-for = "item in couponPackages" :key="item.id" >
				<ul class="coupon-info" v-for="i in item.quantity" :key="i">
					<li>
						<div class="coupon-info-top">
							<div class="coupon-info-top-left">
								<div class="coupon-info-top-left-left">
									<img src="../assets/couponPackage.png">
								</div>
								<div class="coupon-info-top-left-right">
									<p>优惠券包</p> 
									<p>还有{{ this.expireRemain }}天到期</p>
								</div>
							</div>
							<div class="coupon-info-top-right">
								<P>&#165;{{ item.descriptions[1] }}</P>
								<P>满{{ item.descriptions[0] }}可用</P>
							</div>
						</div>
						<div class="coupon-info-bottom">
							<div class="coupon-info-bottom-left">
								<p>使用规则</p>
								<i class="fa fa-angle-down"></i>
							</div>
							<div class="coupon-info-bottom-right" v-show="showCouponUseBottom">
								<bottom @click="toOrderPage(item.descriptions[0], item.descriptions[1])">去使用</bottom>
							</div>
						</div>
					</li>
					
				</ul>	
			</li>
		</ul>
		

		<!-- 购买券包按钮 -->
		<button class="purchase-button" @click="handleButtonClick()">
			<span>去购买</span>
		</button>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				showCouponUseBottom: this.$route.query.showCouponUseBottom,
				couponPackages:[
					{ name: 'coupon_10_2', quantity:'', descriptions: ['10', '2'] },
					{ name: 'coupon_20_3', quantity:'', descriptions: ['20', '3'] },
					{ name: 'coupon_30_5', quantity:'', descriptions: ['30', '5'] },
					{ name: 'coupon_20_6', quantity:'', descriptions: ['20', '6'] },
					{ name: 'coupon_30_10', quantity:'', descriptions: ['30', '10'] },
					{ name: 'coupon_50_15', quantity:'', descriptions: ['50', '15'] },
				],
				user: {},
				expireRemain:'',
				orderTotal: this.$route.query.orderTotal,
				readyToUse:'',
				isCouponUsed:'',
				businessId:this.$route.query.businessId
			};
		},
		created(){
			this.user = this.$getSessionStorage('user');
			let url_getCoupon = `/CouponController/getCouponById/${this.user.token.token}`
			//查询当前用户的优惠券信息
			this.$axios.get(url_getCoupon)
			.then(response => {
				this.couponPackages[0].quantity= response.data.result.coupon_10_2;
				this.couponPackages[1].quantity= response.data.result.coupon_20_3;
				this.couponPackages[2].quantity= response.data.result.coupon_30_5;
				this.couponPackages[3].quantity= response.data.result.coupon_20_6;
				this.couponPackages[4].quantity= response.data.result.coupon_30_10;
				this.couponPackages[5].quantity= response.data.result.coupon_50_15;
				this.expireRemain = response.data.result.expireRemain;
			})
			.catch(error => {
				console.error(error);
			});
		},
		methods: {
			toOrderPage(total, ready){
				console.log(typeof this.orderTotal);
				if(parseFloat(this.orderTotal) < parseFloat(total)){
					alert('未满'+total+'不可使用!');
					
				}else{
					this.readyToUse = ready;
					this.$router.push({path:'/orders', query:{couponUsedAmount:this.readyToUse, isCouponUsed:true, usedCouponPackage: 'coupon_'+total+'_'+ready, businessId: this.businessId}});
				}
			},
			handleButtonClick(){
				this.$router.push({path:'/buyCoupon'});
			},
			goBack(){
				this.$router.push({path:'/userCenter'})// 回退到上一页
			}
		},
	};
</script>

<style scoped>
body {
    
    margin: 0;
    padding: 0;
    overflow: hidden; /* 防止页面出现水平滚动条 */
}
	.wrapper {
		/* height: 100vh; */
		/* 使用视口高度使整个页面充满视口 */
		/* display: flex;
		flex-direction: column;
		align-items: center; */
		/* 水平居中 */
		/* justify-content: center; */
		/* 垂直居中 */
		width: 100%;
        height: 100%;
		background-color: #eee;
	}

	/*********header部分********/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 5vw;
		position: fixed;
		left: 0;
		top: 0;
		/* 给予高层叠级别 */
		z-index: 1000;
		/* 位置上下左右居中 */
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.rollback i{
    position: fixed;
    top: 4vw;
    left: 3vw;
    display: flex;
    align-items: center;
    cursor: pointer;

    color: #fff;
    font-size: 6vw;

    z-index: 2000;
 }

	/*********券包信息部分*********/
	.wrapper .coupon{
		width: 100%;
        margin-top: 12vw; /* 利用外边距隔开header部分 */
		padding-bottom: 12vw;
	}
	
	.wrapper .coupon li{
		margin: 2vw auto 0;
	}
	.wrapper .coupon .coupon-info {
		width: 100%;
	}
	.wrapper .coupon .coupon-info li {
		margin: 2vw auto 0; 
		padding: 2.5vw;
		user-select: none;
		box-sizing: border-box;
		user-select: none;

		background-color: #fff;
		border-radius: 20px;
		width: 95%;
	}
	.wrapper .coupon .coupon-info .coupon-info-top{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.wrapper .coupon .coupon-info .coupon-info-top .coupon-info-top-left{
		display: flex;
		align-items: center;
		
	}
	.wrapper .coupon .coupon-info .coupon-info-top .coupon-info-top-left .coupon-info-top-left-left{
		
	}
	.wrapper .coupon .coupon-info .coupon-info-top .coupon-info-top-left .coupon-info-top-left-left img{
		width: 15vw;
		height: 15vw;
		border-radius: 10px;
	}
	.wrapper .coupon .coupon-info .coupon-info-top .coupon-info-top-left .coupon-info-top-left-right {
		margin-left: 4vw;
	}
	
	.wrapper .coupon .coupon-info .coupon-info-top .coupon-info-top-left .coupon-info-top-left-right p:first-child{

	}
	.wrapper .coupon .coupon-info .coupon-info-top .coupon-info-top-left .coupon-info-top-left-right p:last-child{
		color: #666;
		padding-top: 1vw;
		font-size: 3.5vw;
	}
	.wrapper .coupon .coupon-info .coupon-info-top .coupon-info-top-right{
		
	}
	.wrapper .coupon .coupon-info .coupon-info-top .coupon-info-top-right p:first-child{
		color: #DC143C;
		margin-left: 6vw;
		font-size: 6vw;
	}
	.wrapper .coupon .coupon-info .coupon-info-top .coupon-info-top-right p:last-child{
		color: #666;
		padding-top: 0.5vw;
		font-size: 3.5vw;
	}
	.wrapper .coupon .coupon-info .coupon-info-bottom{
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top: solid 1px #DDD;
		margin-top: 1vw;
	}
	.wrapper .coupon .coupon-info .coupon-info-bottom .coupon-info-bottom-left{
		display: flex;
		align-items: center;
		margin-top: 2vw;
	}
	.wrapper .coupon .coupon-info .coupon-info-bottom .coupon-info-bottom-left p{
		color: #666;
		font-size: 4vw;
	}
	.wrapper .coupon .coupon-info .coupon-info-bottom .coupon-info-bottom-left i{
		color: #666;
		font-size: 4vw;
		margin-left: 1vw;
	}
	.wrapper .coupon .coupon-info .coupon-info-bottom .coupon-info-bottom-right{
		padding:1vw 2vw ;
		background-color: #FF4500;
		color: #fff;
		border-radius: 4vw;
		font-size: 3.5vw;
		margin-top: 2vw;
	}

	/******购买券包按钮样式 ******/
	.purchase-button {
		margin-top: 20px; /* 固定按钮位置 */
		padding: 15px 120px;
		background-color: orange;
		color: #fff;
		text-align: center;
		border: none;
		font-size: 5vw;
		cursor: pointer;
		outline: none;
		transition: background-color 0.3s ease;
		display: flex;
		justify-content: center;
		align-items: center;

		position: fixed;
		left: 0;
		bottom: 0;

		width: 100%;
		height: 14vw;
	}

	
</style>

